<template>
	<view class="pd-20" style="display: flex;flex-direction: column;height: 100%;">
		<view class="bg_fff bg_border">
			<textarea  v-model="dataText" placeholder="粘贴关键词信息，信息自动拆分关键词" border="none" maxlength="-1"
				style="height:292rpx;width: 96%;padding: 10rpx 0;margin: 0px 2%;">
			</textarea >
			<view class="display_row_btn_center c_999999 f_34 pd-20">
				<view class="display_row_btn_center">
					<!-- <image class="mr-10"
						src="https://dtkj-qnyimg.diankuai.com/%E6%8E%A8%E5%B9%BF%E8%AF%A6%E6%83%85/%E5%AF%BC%E5%85%A5.png"
						style="width: 40rpx;height: 45rpx;"></image>
					<text>导入文件</text> -->
				</view>

				<view>
					<text style="margin-right: 40rpx;" class="c_C62B2C" @click="showPop">示例</text>
					<text @click="discern" style="color: blue;">识别</text>
				</view>
			</view>
		</view>

		<u-list :customStyle="{flex:'1',paddingTop: '20rpx'}" height="0px">
			<view v-for="(item, index) in dataList" :key="index" class="bg_fff bg_border mb-20" style="border: none;">
				<view class="pd-10 display_row_btn_center" style="padding-bottom: 0px;">
					<text style="font-weight: 600;">关键词{{index+1}}</text>
					<image src="https://dtkj-qnyimg.diankuai.com/delete_light.png" style="width: 40rpx;height: 40rpx;"
						v-if="index>0" @click="delOne(index)"></image>
				</view>
				<u--form labelPosition="left" labelWidth="160rpx" :labelStyle="{
				paddingLeft:'20rpx',
				color: '#333333'
				}">
					<u-form-item label="关键词" prop="item.keyword">
						<u--input v-model="item.keyword" border="none" placeholder="请输入关键词"></u--input>
					</u-form-item>
					<view class="textUrl">
						<u-form-item label="内容链接" prop="item.url">
							<u--textarea v-model="item.url" placeholder="请输入内容链接" border="none" maxlength="-1"
								height="100rpx">
							</u--textarea>
						</u-form-item>
					</view>
					<!-- <u-form-item label="内容类型" prop="item.url">
						<u--input v-model="item.url" border="none" placeholder="请输入内容链接"></u--input>
					</u-form-item> -->
				</u--form>
			</view>
		</u-list>

		<view class="addBtn display_row_center" @click="addOne">
			<u-icon name="plus" color="#C62B2C" size="16">
			</u-icon>
		</view>

		<view class="btmBox c_ffffff" @click="$u.throttle(doSub, 3000)">
			确认
		</view>

		<uni-popup type="bottom" ref="popup" background-color="#ffffff">
			<view style="height: 400rpx;">
				<view class="popTitle">
					关键词识别
				</view>
				<u-divider :customStyle="{margin:'0px'}"></u-divider>
				<view class="pd-20">
					<view class="c_000000">以换行分隔单个关键词</view>
					<view class="mt-20 c_999999">关键词1 内容链接1</view>
					<view class="mt-10 c_999999">关键词2 内容链接2</view>
				</view>
			</view>
		</uni-popup>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		postKeyWords,
		getCategores
	} from '@/config/api.js'

	export default {
		name: "keyword_add",
		props: {
			missionId: {
				type: String,
				default: ""
			}
		},
		options: {
			styleIsolation: 'shared'
		},
		data() {
			return {
				dataList: [{
					keyword: "",
					url: "",
				}],
				dataText: "",
				show: false
			}
		},
		created() {},
		methods: {
			doSub() {
				postKeyWords({
					missionId: this.missionId,
					keywords: JSON.stringify(this.dataList)
				}).then(res => {
					this.$refs.uToast.show({
						type: 'default',
						message: "关键词添加成功",
						complete() {
							uni.navigateBack({
								delta: 1
							})
						}
					})
				}).catch(err => {
					uni.showToast({
						title: err.info,
						duration: 2000,
						icon: 'none'
					})
				})
			},
			discern() {
				var dataText = this.dataText;
				var list = dataText.split("\n");
				var dataList = [];
				if (list.length > 0) {
					for (var item of list) {
						var itemArg = item.split(" ");
						if (itemArg.length >= 2) {
							if (itemArg[0].trim() != "" && itemArg[1].trim() != "") {
								dataList.push({
									keyword: itemArg[0].trim(),
									url: itemArg[1].trim(),
								})
							}
						}
					}
				}

				if (dataList.length > 0) {
					this.dataList = dataList;
				}
			},
			addOne() {
				this.dataList.push({
					keyword: "",
					url: "",
				})
			},
			delOne(index) {
				this.dataList.splice(index, 1)
			},
			showPop() {
				this.$refs.popup.open();
				this.show = true;
			}
		}
	}
</script>

<style scoped>
	.bg_border {
		border: 1px solid #999999;
		border-radius: 20rpx;
		overflow: hidden;
		box-sizing: border-box;
	}

	.addBtn {
		width: 100%;
		height: 60rpx;
		border: 1px dotted #C62B2C;
		margin-bottom: 40rpx;
		border-radius: 10rpx
	}

	.popTitle {
		font-size: 40rpx;
		font-weight: 600;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
	}

	.textUrl>/deep/ .u-form-item>.u-form-item__body>.u-form-item__body__right>.u-form-item__body__right__content>.u-form-item__body__right__content__slot>.u-textarea {
		padding: 0;
	}

	.textUrl>/deep/ .u-form-item>.u-form-item__body>.u-form-item__body__right>.u-form-item__body__right__content>.u-form-item__body__right__content__slot>.u-textarea>.u-textarea__field {
		color: #303133;
	}

	.textUrl>/deep/ .u-form-item>.u-form-item__body>.u-form-item__body__left {
		align-items: flex-start !important;
	}
</style>
